<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ECS</title>

  <link href='css/iconfont/iconfont.css' rel='stylesheet'></link>
  <link rel="stylesheet" href="../bgAll/css/common.css" type="text/css"/>
  
  <link rel="stylesheet" type="text/css" href="css/ecs.css">
  <link rel="stylesheet" type="text/css" href="css/textAnimate.css">
  <link rel="stylesheet" type="text/css" href="css/aa.css">

  <link rel="stylesheet" href="../bgAll/css/fakeLoader.css" type="text/css"/>
  <style type="text/css">
  .fakeloader{position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;z-index: 999;background-image: url(../bgAll/img/bg.png);}
  </style>


</head>
<body class="wrap">

  <div class="fakeloader"></div> 

  <div class="mod-star-list">
    <div class="inner">
    </div>
  </div> <!-- star-animate -->

    <!-- header Start -->
  <div id="header" class="mt12 clearfix" style="margin-left:10px">
        <div class="header-left" >
            <a href="../RDS/index.html" class="clearfix">
                <div class="bg-next rotate5 btn"></div>
                <p>浏览下一个产品</p>
            </a>
        </div>
        <div class="header-right" >
            <div class="header-open">云服务器<span style="color:#90b8f1;font-size:14px"></span><p>
            Elastic Compute Service</p></div>
        </div>
    </div>
<!-- header End -->

  <div class="imgDiv ">

    <div class="inner-pro">

      <div class="img_back">
        <img src="img/ecsbackground.png">

        <div class="J_shili">
          <div class="shili_range">
            <input type="range" id="range" value="60" max="100" min="10" step="10" onchange="change(this.value,1)" />
            <div class="fixedPos">
              <div class="rangeBg"></div>
            </div>
            <div class="prompt shili_expand_boxShadow">
             请滑动滑轨
             <span class="prompt_line">
             </div>
           </div>

           <span class="J_shili_click_area shili_click_area1"></span>
           <span class="J_shili_click_area shili_click_area2"></span>
           <span class="J_shili_click_area shili_click_area3"></span>

           <span class="pro_shili_light nav_icon_light"></span>

           <div class="shili_expand shili_expand_boxShadow">
            <aside class="shili_ele">
              <span class="security_txt">实例数</span>
              <span class="security_dynamic">50</span>
              <ul class="security">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </aside>
            <aside>
              <span class="performance_txt">性能</span>
              <span class="performance_dynamic">50</span>
              <ul class="performance">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </aside>
          </div>
          <div class="J_shili_lines1">
            <span class="shili_lines2"></span>
            <span class="shili_lines3"></span>
          </div>
        </div><!-- shili -->
        
        <div class="J_cipan">

          <span class="J_cipan_click_area section1" onclick="cipanAnimate('section1',this)"></span>
          <span class="J_cipan_click_area J_cipan_click_area2 section2" onclick="cipanAnimate('section2',this)"></span>
          <span class="J_cipan_click_area J_cipan_click_area3 section3" onclick="cipanAnimate('section3',this)"></span>

          <span class="pro_cipan_light nav_icon_light"></span>

          <section class="cipan1 section1">
           <div class="protect21 ">
            <div class="protect22 "></div>
            <div class="protect23 "></div>
           </div>
           <!-- <div class="protect">
             <div class="protect2 shili_expand_boxShadow"></div>
             <div class="protect3 shili_expand_boxShadow"></div>
           </div> -->
           <div class="">
             <img src="img/1.png" class="data1 cipan_data1_bounce" />
             <div class="div_data1 cipan_div_data2_bounce"></div>
             <div class="div_data1_rotate cipan_div_data2_rotate_bounce"></div>
           </div>
           <div class="">
             <img src="img/1.png" class="data11 cipan_data11_bounce" />
             <div class="div_data12 cipan_div_data22_bounce"></div>
             <div class="div_data12_rotate cipan_div_data22_rotate_bounce"></div>
           </div>
           <div class="">
              <img src="img/1.png" class="data111 cipan_data111_bounce" />
              <div class="div_data13 cipan_div_data23_bounce"></div>
              <div class="div_data13_rotate cipan_div_data23_rotate_bounce"></div>
           </div>
          
          </section>
       <section class="cipan2 section2">
         <div class="protect21 ">
          <div class="protect22 "></div>
          <div class="protect23 "></div>
         </div>
         <!-- <div class="protect">
          <div class="protect2 shili_expand_boxShadow"></div>
          <div class="protect3 shili_expand_boxShadow"></div>
                 </div> -->
         <div class="">
             <img src="img/1.png" class="data2 cipan_data1_bounce" />
             <div class="div_data2 cipan_div_data2_bounce"></div>
             <div class="div_data2_rotate cipan_div_data2_rotate_bounce"></div>
          </div>
          <div class="">
             <img src="img/1.png" class="data22 cipan_data11_bounce" />
             <div class="div_data22 cipan_div_data22_bounce1"></div>
             <div class="div_data22_rotate cipan_div_data22_rotate_bounce"></div>
          </div>
          <div class="">
              <img src="img/1.png" class="data222 cipan_data111_bounce" />
              <div class="div_data23 cipan_div_data23_bounce1"></div>
              <div class="div_data23_rotate cipan_div_data23_rotate_bounce"></div>
          </div>
           <div class="toHide">
           </div>
       </section>
       <section class="cipan3 section3">
         <div class="protect31 ">
          <div class="protect32 "></div>
          <div class="protect33 "></div>
         </div>
         <div class="">
             <img src="img/1.png" class="data3 cipan_data1_bounce" />
             <div class="div_data3 cipan_div_data2_bounce"></div>
             <div class="div_data3_rotate cipan_div_data2_rotate_bounce"></div>
          </div>
          <div class="">
             <img src="img/1.png" class="data33 cipan_data11_bounce" />
             <div class="div_data32 cipan_div_data22_bounce1"></div>
             <div class="div_data32_rotate cipan_div_data22_rotate_bounce"></div>
          </div>
          <div class="">
              <img src="img/1.png" class="data333 cipan_data111_bounce" />
              <div class="div_data33 cipan_div_data23_bounce1"></div>
              <div class="div_data33_rotate cipan_div_data23_rotate_bounce"></div>
          </div>

       </section>

        </div><!-- cipan -->

        <div class="J_photo" onclick="copyIcon(this)">
          <span class="pro_photo_light1 nav_icon_light"></span>
          <span class="pro_photo_light2 nav_icon_light"></span>
          
          <section class="copy_icon1 animateCommon">
            <img src="img/kuaizhao.png" class="dis_none " style="">
          </section>
          <!-- <section class="copy_icon2 animateCommon">
            <img src="img/kuaizhao.png" class="dis_none" style="">
          </section>
          <section class="copy_icon3 animateCommon">
            <img src="img/kuaizhao.png" class="dis_none" style="">
          </section> -->

          <aside style="width:67px;height:50px;position:absolute;top:-30px;left:30%;">
           <img src="img/data.png" class="guang1 photo_light1">
           <img src="img/data.png" class="guang11 photo_light1">

           <img src="img/data.png" class="guang2 photo_light2">
           <img src="img/data.png" class="guang22 photo_light2">
         </aside>
         <aside style="width:67px;height:50px;position:absolute;top:12px;left:72%;">
           <img src="img/data.png" class="guang1 photo_light1">
           <img src="img/data.png" class="guang11 photo_light1">

           <img src="img/data.png" class="guang2 photo_light2">
           <img src="img/data.png" class="guang22 photo_light2">
         </aside>

       </div><!-- photo -->

       <div class="J_avail_area">

        <span class="J_area_click_area" onclick="areaAnimate()"></span>
        <span class="J_area_click_area J_area_click_area2" onclick="areaAnimate()"></span>

        <span class="pro_area_lightA nav_icon_light"></span>
        <span class="pro_area_lightB nav_icon_light"></span>

        <aside style="width:67px;height:50px;position:absolute;top:113px;left:133%;">
         <img src="img/data.png" class="guang1 photo_light1">
         <img src="img/data.png" class="guang11 photo_light1">

         <img src="img/data.png" class="guang2 photo_light2">
         <img src="img/data.png" class="guang22 photo_light2">
       </aside>

     </div><!-- avail_area -->

   </div>

 </div><!-- inner-pro -->
 

</div><!-- imgDiv -->

<nav>
  <aside>
    <img src="img/navbar-bg.png" class="nav_line" />
    <ul class="nav_ecs">
      <li class="nav_shili" id="shili">
        <!-- <span class="shili_nolight "></span> -->
        <span class="shili_light nav_icon_light"></span>
        <img src="img/navbar-circle2.png" class="rotate5" />
        <label>实例</label>

      </li>
      <li class="nav_cipan cipan1" id="cipan">
        <!-- <span class="cipan_nolight "></span> -->
        <span class="cipan_light nav_icon_light"></span>
        <img src="img/navbar-circle2.png" class="rotate5" />
        <label>磁盘</label>

      </li>
      <li class="nav_photo" id="photo">
        <!-- <span class="photo_nolight "></span> -->
        <span class="photo_light nav_icon_light"></span>
        <img src="img/navbar-circle2.png" class="rotate5" />
        <label>快照镜像</label>

      </li>
      <li class="nav_area" id="area">
        <!-- <span class="area_nolight "></span> -->
        <span class="area_light nav_icon_light"></span>
        <img src="img/navbar-circle3.png" class="rotate5"/>

      </li>
    </ul>
    <div class="nav_point">
      <section class="shiliSec dis_none ">
        <ul>
          <li>
            <h3>弹性</h3>
            <p class="p1">
              <i class="icon iconfont">&#xe600;</i>
              10分钟内可启动或释放百台云服务器
            </p>
            <p class="p1 p2">
              <i class="icon iconfont">&#xe600;</i>
              5分钟内停机升级CPU和内存
            </p>
            <p class="p1 p3">
              <i class="icon iconfont">&#xe600;</i>
              在线不停机升级带宽
            </p>
          </li>
        </ul>
      </section>
      <section class="cipanSec dis_none ">
        <ul>
          <li>
            <h3>安全</h3>
            <p class="p1">
              <i class="icon iconfont">&#xe600;</i>
              防DDoS系统
            </p>
            <p class="p1 p2">
              <i class="icon iconfont">&#xe600;</i>
              安全组规则保护
            </p>
            <p class="p1 p3">
              <i class="icon iconfont">&#xe600;</i>
              多用户隔离
            </p>
            <p class="p1 p4">
              <i class="icon iconfont">&#xe600;</i>
              防密码破解
            </p>
          </li>
          <li>
            <h3>高性能</h3>
            <p class="p1 p5">
              <i class="icon iconfont">&#xe600;</i>
              随机IOPS 1.2万、300MB/s本地SSD盘性能
            </p>
            <p class="p1 p6">
              <i class="icon iconfont">&#xe600;</i>
              多线BGP骨干网络接入
            </p>
            <p class="p1 p7">
              <i class="icon iconfont">&#xe600;</i>
              高性价比
            </p>
            <p class="p1 p8">
              <i class="icon iconfont">&#xe600;</i>
              节约成本
            </p>
          </li>
        </ul>
      </section>
      <section class="photoSec  dis_none">
        <ul>
          <li>
            <h3>快照备份与恢复</h3>
            <p class="p1">
              <i class="icon iconfont">&#xe600;</i>
              对云服务器的磁盘数据生成快照，用户可使用快照回滚、恢复以往磁盘数据，加强数据安全。
            </p>
            <span class="cover1"></span>
          </li>
          <li>
            <h3>自定义镜像</h3>
            <p class="p1 p2">
              <i class="icon iconfont">&#xe600;</i>
              对已安装应用软件包的云服务器，支持自定义镜像、数据盘快照批量创建服务器，简化用户管理部署。
            </p>
            <span class="cover1 cover2"></span>
          </li>
        </ul>
      </section>
      <section class="areaSec  dis_none">
        <ul>
          <li>
            <h3>稳定</h3>
            <p class="p1">
              <i class="icon iconfont">&#xe600;</i>
              云盘数据可靠性不低于99.999%
            </p>
            <p class="p1 p2">
              <i class="icon iconfont">&#xe600;</i>
              自动宕机迁移、数据备份和回滚
            </p>
            <p class="p1 p3">
              <i class="icon iconfont">&#xe600;</i>
              系统性能报警
            </p>
          </li>
        </ul>
      </section>
    </div>

  </aside>
</nav><!-- nav -->

<footer class="clearfix">
    <div class="footer-left fl">
        <a href="../index/index.html?goods=goods0" class="back shineAction"></a>
        <div class="backText">返回主菜单</div>
    </div>
    <div class="footer-right fr">
        <a href="" class="refresh shineAction"></a>
        <div class="refreshText">刷新&nbsp;</div>
    </div>
</footer>

</body>

<script type="text/javascript"  src='../bgAll/js/jquery-1.11.1.min.js'></script>

<script src="../bgAll/js/fakeLoader.min.js"></script>
<script src="../bgAll/js/common.js"></script>

<script type="text/javascript"  src='../bgAll/js/waypoints.js'></script>
<script type="text/javascript"  src='../bgAll/js/star.js'></script>

<script type="text/javascript" src="js/ecs.js"></script>

</html>